<template>
	<view class="agreement-container">
		<scroll-view class="agreement-content" scroll-y="true">
			<rich-text :nodes="serviceContent"></rich-text>
		</scroll-view>
		<view class="agreement-buttons">
			<button class="agreement-button" @click="agree">同意</button>
			<button class="agreement-button" @click="disagree">不同意</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				serviceContent: `
        <p>欢迎使用我们的服务！本服务协议旨在明确您与我们之间的权利和义务。</p>
        <h3>1. 服务内容</h3>
        <p>我们提供的服务包括但不限于：</p>
        <ul>
          <li>功能使用</li>
          <li>数据存储</li>
          <li>信息展示</li>
        </ul>
        <h3>2. 用户权利与义务</h3>
        <p>用户应遵守相关法律法规，不得利用本服务从事任何违法活动。</p>
        <h3>3. 免责声明</h3>
        <p>我们不保证服务的绝对稳定性和安全性。</p>
      `
			};
		},
		methods: {
			agree() {
				setTimeout(() => {
					uni.redirectTo({
						url: "/pages/login/login" // 修改为你希望跳转到的页面路径
					});
				}, 2000); // 等待 toast 消失后跳转
			},
			disagree() {
				// uni.showToast({
				// 	title: "您已拒绝服务协议",
				// 	icon: "none"
				// });
				setTimeout(() => {
					uni.navigateBack({
						delta: 1 // 返回上一个页面
					});
				}); // 等待 toast 消失后返回
			}
		}
	};
</script>

<style scoped>
	.agreement-container {
		padding: 20rpx;
		background-color: #f5f5f5;
	}

	.agreement-buttons {
		display: flex;
		justify-content: space-between;
		margin-top: 20rpx;
	}

	.agreement-button {
		width: 48%;
		height: 80rpx;
		line-height: 80rpx;
		background-color: #2ba245;
		color: #fff;
		font-size: 32rpx;
		border-radius: 10rpx;
	}

	.agreement-button:nth-child(2) {
		background-color: #eee;
		color: #333;
	}
</style>